<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/competition-common :: common_head(${myLinks}, ${myScripts})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建团队</title>
    <style>
        .member-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 10px;
        }
        .member-item {
            border: 1px solid #007bff;
            padding: 10px;
            border-radius: 10px;
            background-color: #f1f9ff;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .member-role {
            font-weight: bold;
        }
    </style>
</head>
<body>
<div th:replace="common/competition-common::mall-header"></div>
<div th:replace="common/competition-common::competition-sidebar"></div>
<!-- 主内容区 -->
<div class="com-body">
    <div class="com-title">创建团队</div>
    <div class="card card-form">
        <form th:action="@{/team/create}" method="post" th:object="${team}" enctype="multipart/form-data" onsubmit="return validateForm()">
            <input type="hidden" th:value="${newTeamId}" name="newTeamId" id="newTeamId">
            <div class="mb-3">
                <label for="teamName" class="form-label">团队名称</label>
                <input type="text" class="form-control" id="teamName" name="tname" th:field="*{tname}" required>
            </div>
            <div class="mb-3">
                <label for="teamLogo" class="form-label">团队Logo</label>
                <input type="file" class="form-control" id="teamLogo" name="logoFile" required>
            </div>
            <div class="mb-3">
                <label for="studentMembers" class="form-label">学生队员</label>
                <label for="studentSearch"></label><input type="text" class="form-control" id="studentSearch" placeholder="输入学生ID搜索">
                <button type="button" class="btn btn-primary" onclick="searchMember('student')">添加</button>
                <div class="member-list" id="studentMembersList"></div>
            </div>
            <div class="mb-3">
                <label for="teacherMembers" class="form-label">指导教师</label>
                <label for="teacherSearch"></label><input type="text" class="form-control" id="teacherSearch" placeholder="输入教师ID搜索">
                <button type="button" class="btn btn-primary" onclick="searchMember('teacher')">添加</button>
                <div class="member-list" id="teacherMembersList"></div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">创建</button>
                <button type="button" class="btn btn-secondary" onclick="window.history.back()">取消</button>
            </div>
        </form>
    </div>
</div>
<div th:replace="common/competition-common::mall-footer"></div>

<script>
    let studentCount = 0;
    let teacherCount = 0;

    function validateForm() {
        const teamName = document.getElementById('teamName').value;
        const teamLogo = document.getElementById('teamLogo').files.length;
        const studentMembers = document.querySelectorAll('input[name="studentMembers"]').length;
        const teacherMembers = document.querySelectorAll('input[name="teacherMembers"]').length;

        if (!teamName) {
            alert('团队名称不能为空');
            return false;
        }

        if (!teamLogo) {
            alert('团队Logo不能为空');
            return false;
        }

        if (studentMembers < 1) {
            alert('至少需要添加一名学生队员');
            return false;
        }

        if (teacherMembers < 1) {
            alert('至少需要添加一名教师成员');
            return false;
        }

        return true;
    }

    function searchMember(type) {
        const id = type === 'student' ? document.getElementById('studentSearch').value : document.getElementById('teacherSearch').value;
        fetch(`/team/searchMember?id=${id}`)
            .then(response => response.json())
            .then(data => {
                if (data && data.id && data.uname) {
                    const memberList = type === 'student' ? document.getElementById('studentMembersList') : document.getElementById('teacherMembersList');
                    const memberRole = type === 'student' ? '队员' : '教师';
                    if ((type === 'student' && studentCount < 2) || (type === 'teacher' && teacherCount < 2)) {
                        const memberItem = document.createElement('div');
                        memberItem.className = 'member-item';
                        memberItem.innerHTML = `
                            <span class="member-role">${type === 'student' ? '学生' : '教师'}：</span>
                            <span>${data.id} ${data.uname}</span>
                            <input type="hidden" name="${type === 'student' ? 'studentMembers' : 'teacherMembers'}" value="${data.id}">
                            <input type="hidden" name="${type === 'student' ? 'studentRoles' : 'teacherRoles'}" value="${memberRole}">
                            <button type="button" class="btn btn-danger" onclick="removeMember(this, '${type}')">取消</button>
                        `;
                        memberList.appendChild(memberItem);
                        if (type === 'student') {
                            studentCount++;
                        } else {
                            teacherCount++;
                        }
                        // 清空输入框
                        document.getElementById(type === 'student' ? 'studentSearch' : 'teacherSearch').value = '';
                    } else {
                        alert(`最多只能添加两名${type === 'student' ? '学生' : '教师'}成员`);
                    }
                } else {
                    alert('未找到该成员');
                }
            });
    }

    function removeMember(button, type) {
        const memberItem = button.parentNode;
        memberItem.parentNode.removeChild(memberItem);
        if (type === 'student') {
            studentCount--;
        } else {
            teacherCount--;
        }
    }
</script>
</body>
</html>
